<template>
  <div>
    <div class="amap-page-container" v-if="showmap">
      <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo" :plugin="plugin">
        
        <el-amap-marker 
        v-for="(marker,index) in markers"
        :key="index"
        :position="marker.position" :visible="marker.visible" :draggable="marker.draggable">
          <img src="./img/rec@3x.png" class="imgSr pingyi" v-if="marker.type === 'rec'">
          <img src="./img/send@3x.png" class="imgSr pingyi" v-if="marker.type === 'send'">
          <img src="./img/cheicon@3x.png" class="imgtra pingyitra" v-if="marker.type === 'driver'">
         </el-amap-marker>
        <!-- <el-amap-marker 
         :position="markerTar.position" 
         :events="markerTar.events" 
         :visible="markerTar.visible" 
         :draggable="markerTar.draggable" 
         class="pointimg"
         v-if="point.ifshowtra===false"
         >
           <img src="./img/cheicon@3x.png" class="imgtra pingyitra">
        </el-amap-marker> -->

        

      </el-amap>
    </div>
  </div>
</template>

<style>
  .amap-page-container {
    height: 100vh;
  }
  .amap-logo img{
    display: none;
  }
  .amap-copyright{
    display: none !important;
  }
  .imgSr{
    width: 1.02rem;
    height: 0.61rem;
  }
  .imgtra{
    width: 0.68rem;
    height: 0.88rem;
  }
  .pointimg{
    position: relative;
    width: 0.10rem;
    height: 0.10rem;
    background: red;
  }
  .pingyi{
    position: absolute;
    left:-0.35rem;
    top:-0.19rem;
  }
  .pingyitra{
    position: absolute;
    left:-0.24rem;
    top:-0.44rem;
  }
  </style>


<script>
export default {
  props:["mapindex"],
  data () {
    return {
      zoom: 10,
      center: [121.5273285, 31.21515044],
      showmap:false,
      markers:[
      ],
      markerTar:{
      },
      plugin: []
      }
      },
      created() {
         
         
      },
      mounted(){
        console.log(this.mapindex)
        this.initmap()
      },
      methods:{
       initmap(){
          let send = {
           position:this.mapindex.pick,
           visible: true,
           draggable: false,
           type:'send'
         }
         let rec = {
           position:this.mapindex.rec,
           visible: true,
           draggable: false,
           type:'rec'
         }
         this.center =  this.mapindex.center
         var driver = {}
         if(this.mapindex.status == 100 || !this.mapindex.driver ){
           driver = {
           position:this.mapindex.driver,
           visible: true,
           draggable: false,
           type:'none'
           }
         }else{
          driver = {
           position:this.mapindex.driver,
           visible: true,
           draggable: false,
           type:'driver'
           }
         }
         this.markers.push(send,rec,driver)
         this.showmap = true
       }
      }
}
</script>
